<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License. 
-->
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css">
    <style type="text/css">
        .dp-highlighter {
            width:95% !important;
        }
    </style>
    <style type="text/css">
        .footer {
            background-image:      url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif');
            background-repeat:     repeat-x;
            background-position:   left top;
            padding-top:           4px;
            color:                 #666;
        }
    </style>
    <link href='https://struts.apache.org/highlighter/style/shCoreStruts.css' rel='stylesheet' type='text/css' />
    <link href='https://struts.apache.org/highlighter/style/shThemeStruts.css' rel='stylesheet' type='text/css' />
    <script src='https://struts.apache.org/highlighter/js/shCore.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushPlain.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushXml.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJava.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJScript.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushGroovy.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushBash.js' type='text/javascript'></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript" language="javascript">
        var hide = null;
        var show = null;
        var children = null;

        function init() {
            /* Search form initialization */
            var form = document.forms['search'];
            if (form != null) {
                form.elements['domains'].value = location.hostname;
                form.elements['sitesearch'].value = location.hostname;
            }

            /* Children initialization */
            hide = document.getElementById('hide');
            show = document.getElementById('show');
            children = document.all != null ?
                    document.all['children'] :
                    document.getElementById('children');
            if (children != null) {
                children.style.display = 'none';
                show.style.display = 'inline';
                hide.style.display = 'none';
            }
        }

        function showChildren() {
            children.style.display = 'block';
            show.style.display = 'none';
            hide.style.display = 'inline';
        }

        function hideChildren() {
            children.style.display = 'none';
            show.style.display = 'inline';
            hide.style.display = 'none';
        }
    </script>
    <title>css_xhtml theme</title>
</head>
<body onload="init()">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr class="topBar">
        <td align="left" valign="middle" class="topBarDiv" align="left" nowrap>
            &nbsp;<a href="home.html">Home</a>&nbsp;&gt;&nbsp;<a href="guides.html">Guides</a>&nbsp;&gt;&nbsp;<a href="tag-developers-guide.html">Tag Developers Guide</a>&nbsp;&gt;&nbsp;<a href="struts-tags.html">Struts Tags</a>&nbsp;&gt;&nbsp;<a href="ui-tags.html">UI Tags</a>&nbsp;&gt;&nbsp;<a href="themes-and-templates.html">Themes and Templates</a>&nbsp;&gt;&nbsp;<a href="cssxhtml-theme.html">css_xhtml theme</a>
        </td>
        <td align="right" valign="middle" nowrap>
            <form name="search" action="https://www.google.com/search" method="get">
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="oe" value="UTF-8" />
                <input type="hidden" name="domains" value="" />
                <input type="hidden" name="sitesearch" value="" />
                <input type="text" name="q" maxlength="255" value="" />
                <input type="submit" name="btnG" value="Google Search" />
            </form>
        </td>
    </tr>
</table>

<div id="PageContent">
    <div class="pageheader" style="padding: 6px 0px 0px 0px;">
        <!-- We'll enable this once we figure out how to access (and save) the logo resource -->
        <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"-->
        <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div>
        <div style="margin: 0px 10px 8px 10px"  class="pagetitle">css_xhtml theme</div>

        <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;">
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14215">
                <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14215">Edit Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">
                <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a>
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">Browse Space</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14215">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14215">Add Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14215">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add News"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14215">Add News</a>
        </div>
    </div>

    <div class="pagecontent">
        <div class="wiki-content">
            <div id="ConfluenceContent"><p>The css_xhtml theme provides all the basics that the <a shape="rect" href="simple-theme.html">simple theme</a> provides and adds several features.</p><ul><li>Standard two-column CSS-based layout, using <code>&lt;div&gt;</code> for the HTML <a shape="rect" href="struts-tags.html">Struts Tags</a> (<a shape="rect" href="form.html">form</a>, <a shape="rect" href="textfield.html">textfield</a>, <a shape="rect" href="select.html">select</a>, etc)</li><li>Labels for each of the HTML <a shape="rect" href="struts-tags.html">Struts Tags</a>, placed according to the CSS stylesheet</li><li><a shape="rect" href="validation.html">Validation</a> and error reporting</li><li><a shape="rect" href="pure-javascript-client-side-validation.html">Pure JavaScript Client Side Validation</a> using 100% JavaScript on the browser</li></ul><h2 id="css_xhtmltheme-WrappingtheSimpleTheme">Wrapping the Simple Theme</h2><p>The xhtml theme uses the "wrapping" technique described by <a shape="rect" href="extending-themes.html">Extending Themes</a>. Let's look at how the HTML tags are wrapped by a standard header and footer. For example, in the <a shape="rect" href="textfield.html">textfield</a> template, <code>text.ftl</code>, the <code>controlheader.ftl</code> and <code>controlfooter.ftl</code> templates are wrapped around the simple template.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[
&lt;#--
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * &quot;License&quot;); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;input&lt;#rt/&gt;
 type=&quot;${(parameters.type!&quot;text&quot;)?html}&quot;&lt;#rt/&gt;
 name=&quot;${(parameters.name!&quot;&quot;)?html}&quot;&lt;#rt/&gt;
&lt;#if parameters.get(&quot;size&quot;)?has_content&gt;
 size=&quot;${parameters.get(&quot;size&quot;)?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.maxlength?has_content&gt;
 maxlength=&quot;${parameters.maxlength?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.nameValue??&gt;
 value=&quot;${parameters.nameValue?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.disabled!false&gt;
 disabled=&quot;disabled&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.readonly!false&gt;
 readonly=&quot;readonly&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.tabindex?has_content&gt;
 tabindex=&quot;${parameters.tabindex?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.id?has_content&gt;
 id=&quot;${parameters.id?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#include &quot;/${parameters.templateDir}/${parameters.expandTheme}/css.ftl&quot; /&gt;
&lt;#if parameters.title?has_content&gt;
 title=&quot;${parameters.title?html}&quot;&lt;#rt/&gt;
&lt;/#if&gt;
&lt;#include &quot;/${parameters.templateDir}/${parameters.expandTheme}/scripting-events.ftl&quot; /&gt;
&lt;#include &quot;/${parameters.templateDir}/${parameters.expandTheme}/common-attributes.ftl&quot; /&gt;
&lt;#include &quot;/${parameters.templateDir}/${parameters.expandTheme}/dynamic-attributes.ftl&quot; /&gt;
/&gt;
]]></script>
</div></div><h3 id="css_xhtmltheme-CSSXHTMLthemeheader">CSS XHTML theme header</h3><p>The header used by the HTML tags in the css_xhtml theme is complicated. Unlike the <a shape="rect" href="xhtml-theme.html">xhtml theme</a>, the CSS theme does not use a <code>labelposition</code> attribute. Instead, the label position is defined by CSS rules.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[
&lt;#--
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * &quot;License&quot;); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;#include &quot;/${parameters.templateDir}/${parameters.expandTheme}/controlheader-core.ftl&quot;&gt;
&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
&lt;#assign labelpos = parameters.form.labelposition/&gt;
&lt;#elseif parameters.labelposition??&gt;
&lt;#assign labelpos = parameters.labelposition/&gt;
&lt;/#if&gt;
&lt;#if labelpos?default(&quot;top&quot;) == &#39;top&#39;&gt;
&lt;div &lt;#rt/&gt;
&lt;#else&gt;
&lt;span &lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.id??&gt;id=&quot;wwctrl_${parameters.id}&quot;&lt;#rt/&gt;&lt;/#if&gt; class=&quot;wwctrl&quot;&gt;
    
]]></script>
</div></div><p>Note that the <code>fieldErrors</code>, usually caused by <a shape="rect" href="validation.html">Validation</a>, are displayed in a <code>div</code> block before the element is displayed.</p><h3 id="css_xhtmltheme-CSSXHTMLthemefooter">CSS XHTML theme footer</h3><p>And the <code>controlfooter.ftl</code> contents:</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[
&lt;#--
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * &quot;License&quot;); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
${parameters.after?if_exists}&lt;#t/&gt;
    &lt;#lt/&gt;
&lt;#if !parameters.labelposition?? &amp;&amp; (parameters.form.labelposition)??&gt;
&lt;#assign labelpos = parameters.form.labelposition/&gt;
&lt;#elseif parameters.labelposition??&gt;
&lt;#assign labelpos = parameters.labelposition/&gt;
&lt;/#if&gt;
&lt;#if labelpos?default(&quot;top&quot;) == &#39;top&#39;&gt;
&lt;/div&gt; &lt;#rt/&gt;
&lt;#else&gt;
&lt;/span&gt; &lt;#rt/&gt;
&lt;/#if&gt;
&lt;#if parameters.errorposition?default(&quot;top&quot;) == &#39;bottom&#39;&gt;
&lt;#assign hasFieldErrors = parameters.name?? &amp;&amp; fieldErrors?? &amp;&amp; fieldErrors[parameters.name]??/&gt;
&lt;#if hasFieldErrors&gt;
&lt;div &lt;#rt/&gt;&lt;#if parameters.id??&gt;id=&quot;wwerr_${parameters.id}&quot;&lt;#rt/&gt;&lt;/#if&gt; class=&quot;wwerr&quot;&gt;
&lt;#list fieldErrors[parameters.name] as error&gt;
    &lt;div&lt;#rt/&gt;
    &lt;#if parameters.id??&gt;
     errorFor=&quot;${parameters.id}&quot;&lt;#rt/&gt;
    &lt;/#if&gt;
    class=&quot;errorMessage&quot;&gt;
             ${error?html}
    &lt;/div&gt;&lt;#t/&gt;
&lt;/#list&gt;
&lt;/div&gt;&lt;#t/&gt;
&lt;/#if&gt;
&lt;/#if&gt;
&lt;/div&gt;
]]></script>
</div></div><h2 id="css_xhtmltheme-SpecialInterest">Special Interest</h2><p>Two css_xhtml templates of special interest are <code>head</code> and <code>form</code>.</p><h3 id="css_xhtmltheme-Headtemplate">Head template</h3><p>The css_xhtml <a shape="rect" href="head.html">head</a> template is similar to the xhtml head template. The difference is that CSS is used to provide the layout.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[
&lt;#--
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * &quot;License&quot;); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;@s.url value=&#39;/struts/css_xhtml/styles.css&#39; includeParams=&#39;none&#39; encode=&#39;false&#39; /&gt;&quot; type=&quot;text/css&quot; /&gt;
&lt;#include &quot;/${parameters.templateDir}/simple/head.ftl&quot; /&gt;
]]></script>
</div></div><p>The head includes a style sheet.</p><div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<script class="brush: xml; gutter: false; theme: Default" type="syntaxhighlighter"><![CDATA[
/*
 * $Id$
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * &quot;License&quot;); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.wwFormTable {}
.label {
    font-style:italic;
    float:left;
    width:30%
}
.errorLabel {font-style:italic; color:red; }
.errorMessage {font-weight:bold; color:red; }
.checkboxLabel {}
.checkboxErrorLabel {color:red; }
.required {color:red;}

.tdTransferSelect {text-align:center; vertical-align:middle;}
.tdLabelTop {text-align:left; vertical-align:top;}
.tdCheckboxLabel {text-align:right; vertical-align:top;}
.tdCheckboxInput {text-align:left; vertical-align:top;}
.tdCheckboxErrorMessage {text-align:left; vertical-align:top;}
.tdErrorMessage {text-align:center; vertical-align:top;}
.formButton {text-align:right;}
]]></script>
</div></div><h3 id="css_xhtmltheme-Formtemplate">Form template</h3><p>The css_xhtml <a shape="rect" href="form.html">form</a> template is almost exactly like the <a shape="rect" href="xhtml-form-template.html">xhtml form template</a>, including support for <a shape="rect" href="pure-javascript-client-side-validation.html">Pure JavaScript Client Side Validation</a>. The difference is that instead of printing out an opening and closing <code>&lt;table&gt;</code> element, there are no elements. Instead, the CSS rules for the individual HTML tags are assumed to handle all display logic. However, as noted, client-side validation is still supported.</p></div>
        </div>

                    <div class="tabletitle">
                Children
            <span class="smalltext" id="show" style="display: inline;">
              <a href="javascript:showChildren()">Show Children</a></span>
            <span class="smalltext" id="hide" style="display: none;">
              <a href="javascript:hideChildren()">Hide Children</a></span>
            </div>
            <div class="greybox" id="children" style="display: none;">
                                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                                    $page.link($child)
                    <span class="smalltext">(Apache Struts 2 Documentation)</span>
                    <br>
                            </div>
        
    </div>
</div>
<div class="footer">
    Generated by CXF SiteExporter
</div>
</body>
</html>
